<template>
  <el-container>
    <el-main>
      <el-row :gutter="20" class="all">
        <!-- <el-col :span="5">
          <el-card class="box-card3" shadow="always">
              <div slot="header" class="clearfix">
                <span style="float: left"><b>统计选项</b></span>
              </div>
              
              <el-table
                max-height="500"
                :data="tableData"
                stripe
                style="width: 100%; border-radius: 15px"
                border
                default-expand-all
                row-key="tag"
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
              >
                <el-table-column prop="tag" label="标签" width="180">
                </el-table-column>
                <el-table-column :selectable="is_selectable" type="selection" label="选择" width="80">
                </el-table-column>
              </el-table>
              <el-button style="margin-top:15px;" size="small" type="primary" icon="el-icon-search" @click="change">确定</el-button>
            </el-card>
        </el-col> -->
        <el-col :span="4">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>选择统计类型</b></span>
            </div>
            <el-table
              ref="typeTable"
              @selection-change="handleAnaTypeSelect"
              max-height="700"
              :data="countTypeData"
              stripe
              style="width: 100%; border-radius: 15px"
              border
              default-expand-all
            >
              <el-table-column prop="tag" label="统计方式" width="140">
              </el-table-column>
              <el-table-column
                :selectable="is_selectable"
                type="selection"
                label="选择"
                width="50"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="20">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>结果查看</b></span>
            </div>
            <el-row class="pipe">
              <el-card id="pipe1" class="box-card4 lh">
                <div slot="header" class="clearfix">
                  <span style="float: left"><b>通道1</b></span>
                  <div style="float: right">
                    <el-button
                      @click="showTagDialog(1)"
                      size="small"
                      type="primary"
                      >自定义群体</el-button
                    >
                    <el-button
                      style="margin-left: 20px"
                      size="small"
                      type="primary"
                      @click="clearGroup(1)"
                      >清空</el-button
                    >
                  </div>
                </div>
                <el-row
                  :gutter="10"
                  type="flex"
                  justify="center"
                  style="margin-top: -20px"
                >
                  <!-- 图表1 -->
                  <el-col :span="6" id="gender">
                    <div class="echarts">
                      <div
                        id="mychart_sex"
                        style="width: 300px; height: 300px; margin-top: 10px"
                      ></div>
                    </div>
                  </el-col>
                  <!-- 图表2 -->
                  <el-col :span="6" id="gender">
                    <div class="echarts">
                      <div
                        id="mychart_sex2"
                        style="width: 300px; height: 300px; margin-top: 10px"
                      ></div>
                    </div>
                  </el-col>
                  <!-- 图表3 -->
                  <el-col :span="6" id="gender">
                    <div class="echarts">
                      <div
                        id="mychart_sex3"
                        style="width: 300px; height: 300px; margin-top: 10px"
                      ></div>
                    </div>
                  </el-col>
                  <!-- 图表4 -->
                  <el-col :span="6" id="gender">
                    <div class="echarts">
                      <div
                        id="mychart_sex4"
                        style="width: 300px; height: 300px; margin-top: 10px"
                      ></div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-row>
            <el-row class="pipe">
              <el-card id="pipe2">
                <div slot="header" class="clearfix">
                  <span style="float: left"><b>通道2</b></span>
                  <div style="float: right">
                    <el-button
                      @click="showTagDialog(2)"
                      size="small"
                      type="primary"
                      >自定义群体</el-button
                    >
                    <el-button
                      style="margin-left: 20px"
                      size="small"
                      type="primary"
                      @click="clearGroup(2)"
                      >清空</el-button
                    >
                  </div>
                </div>
              </el-card>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <!-- 弹出标签选择对话框 -->
    <el-dialog
      title="自定义群体搜索"
      :visible.sync="dialogTableVisible"
      @close="closeDialog"
    >
      <el-card class="box-card3" shadow="always">
        <div slot="header" class="clearfix">
          <span style="float: left"><b>标签选择</b></span>
        </div>

        <el-row :gutter="20" type="flex" justify="center">
          <el-col :span="8">
            <el-table
              ref="tagTable"
              @selection-change="handleTagsSelect"
              max-height="500"
              :data="tableData"
              stripe
              style="width: 100%; border-radius: 15px"
              border
              default-expand-all
              row-key="tag"
              :tree-props="{
                children: 'children',
                hasChildren: 'hasChildren',
              }"
            >
              <el-table-column prop="tag" label="标签" width="180">
              </el-table-column>
              <el-table-column
                :selectable="is_selectable"
                type="selection"
                label="选择"
                width="80"
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col
            :span="16"
            style="border: 1px solid #00000010; border-radius: 15px"
          >
            <el-tag
              style="margin-top: 30px; margin-left: 20px; float: left"
              v-for="tag in tags"
              :key="tag.name"
              :type="tag.type"
            >
              {{ tag.name }}
            </el-tag>
          </el-col>
        </el-row>
        <el-button
          style="margin-top: 15px"
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="doSearch"
          >确定并开始搜索</el-button
        >
      </el-card>
    </el-dialog>
  </el-container>
</template>

<script>
import ExportExcel from "../../components/ExportExcel";
export default {
  components: {
    ExportExcel,
  },
  data() {
    return {
      curGroup: 0,
      dialogTableVisible: false,
      tableData: [
        {
          tag: "商业属性",
          children: [
            {
              tag: "消费能力",
              children: [
                {
                  tag: "111",
                },
                {
                  tag: "112",
                },
                {
                  tag: "113",
                },
              ],
            },
            {
              tag: "消费周期",
              children: [
                {
                  tag: "121",
                },
                {
                  tag: "122",
                },
                {
                  tag: "123",
                },
              ],
            },
            {
              tag: "消费频率",
              children: [
                {
                  tag: "131",
                },
                {
                  tag: "132",
                },
                {
                  tag: "133",
                },
              ],
            },
          ],
        },
        {
          tag: "人口属性",
          children: [
            {
              tag: "职业",
              children: [
                {
                  tag: "211",
                },
                {
                  tag: "212",
                },
                {
                  tag: "213",
                },
              ],
            },
            {
              tag: "性别",
              children: [
                {
                  tag: "221",
                },
                {
                  tag: "222",
                },
              ],
            },
          ],
        },
      ],
      countTypeData: [
        { tag: "年龄分布" },
        { tag: "消费能力分布" },
        { tag: "浏览时段分布" },
        { tag: "商品偏好" },
      ],
      chartsShow: [],
      tags1: [],
      tags2: [],
      tags: [],
      groupData1: [],
      groupData2: [],
      group_sex: [
        { value: 41, name: "男" },
        { value: 52, name: "女" },
      ],
    };
  },
  created() {},
  mounted() {
    // this.tabledata = []
    // 测试用,正常是在搜索后更新echarts
    this.getCharts();
  },
  methods: {
    is_selectable(row, index) {
      return !("children" in row);
    },
    showTagDialog(index) {
      console.log(index);
      this.dialogTableVisible = true;
      this.curGroup = index;
    },
    handleTagsSelect(val) {
      var val2 = [];
      var i = 0;
      for (i; i < val.length; i++) {
        var tag = { name: "", type: "" };
        tag.name = val[i].tag;
        val2.push(tag);
        // console.log(val[i].tag);
      }
      this.tags = val2;
      if (this.curGroup == 1) {
        this.tags1 = val2;
      } else {
        this.tags2 = val2;
      }
    },
    handleAnaTypeSelect(val) {
      var val2 = [];
      var i = 0;
      for (i; i < val.length; i++) {
        val2.push(val[i].tag);
      }
      this.chartsShow = val2;
      console.log(this.chartsShow);
      // 刷新echarts
    },
    doSearch() {
      //检查tag不为0
      if (this.tags.length == 0) {
        this.$message.error("请至少选择一个标签！");
        return false;
      }
      //请求后端
    },
    closeDialog() {
      this.$refs.tagTable.clearSelection();
      this.tags = [];
    },
    clearGroup(index) {
      if (index == 1) {
        this.tags1 = [];
        this.groupData1 = [];
      } else {
        this.tags2 = [];
        this.groupData2 = [];
      }
    },

    //echarts部分
    getCharts() {
      var option_sex = {
        title: {
          text: "群体男女比例",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: this.group_sex,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 性别
      var mychart_sex = this.$echarts.init(
        document.getElementById("mychart_sex")
      );
      mychart_sex.setOption(option_sex);

      //图表2
      var mychart_sex2 = this.$echarts.init(
        document.getElementById("mychart_sex2")
      );
      mychart_sex2.setOption(option_sex);
      //图表3
      var mychart_sex3 = this.$echarts.init(
        document.getElementById("mychart_sex3")
      );
      mychart_sex3.setOption(option_sex);
      //图表4
      var mychart_sex4 = this.$echarts.init(
        document.getElementById("mychart_sex4")
      );
      mychart_sex4.setOption(option_sex);
    },
  },
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-row {
  margin-bottom: 20px;
}
.box-card3 {
  border-radius: 20px;
  margin: 15px auto;
}
.box-card4 {
  border-radius: 20px;
  margin: 2px auto;
}
.all {
}

.option {
}
.type-option {
}
.tag-option {
}
.right-side {
}
.pipe {
  height: 400px;
  background-color: antiquewhite;
  margin-bottom: 20px;
  border-radius: 15px;
}
.lh {
  height: 380px;
}
.llh {
  height: 360px;
}
.br {
  border-radius: 20px;
}
</style>